<script setup lang="ts" name="ThemeColorList">
import { ThemeColorType } from '@/types/theme.d'
import { useScroll } from '@vueuse/core'
const ColorListRef = ref(null)

const props = defineProps({
  themeColorList: {
    type: Object as PropType<ThemeColorType[]>,
    required: true
  },
  hotThemeColorList: {
    type: Object as PropType<ThemeColorType[]>,
    required: true
  }
})

let splitNumber = 50
const themeColorSplit = ref(props.themeColorList.slice(0, splitNumber))

const { arrivedState } = useScroll(ColorListRef, {
  offset: { bottom: 200 },
})
const { bottom } = toRefs(arrivedState)

watch(
  () => bottom.value,
  (newData: boolean) => {
    if (newData) {
      splitNumber = splitNumber + 50
      themeColorSplit.value = props.themeColorList.slice(0, splitNumber)
    }
  })
const emits = defineEmits(['colorChange'])

const colorChange = (color: ThemeColorType) => {
  emits('colorChange', color)
}
</script>

<template>
  <div ref="ColorListRef" class="color-list">
    <ElRow :gutter="15">
      <ElCol v-for="(item, index) in hotThemeColorList" :key="index" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <div class="color-card" @click="colorChange(item)">
          <div class="color-bg" :style="{ backgroundColor: item.hex }" />
          <div class="color-info">
            <div class="color-name">
              <span class="name" :style="{ color: item.hex }">{{ item.name }}</span>
              <span class="pinyin">{{ item.pinyin.toUpperCase() }}</span>
            </div>
            <div class="color-value">
              <span class="hex">{{ item.hex }}</span>
              <ElDivider direction="vertical" />
              <span class="rgb">{{ `rgb(${item.RGB[0]}, ${item.RGB[1]}, ${item.RGB[2]})` }}</span>
            </div>
          </div>
        </div>
      </ElCol>
    </ElRow>
    <ElDivider />
    <ElRow :gutter="15">
      <ElCol v-for="(item, index) in themeColorSplit" :key="index" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <div class="color-card" @click="colorChange(item)">
          <div class="color-bg" :style="{ backgroundColor: item.hex }" />
          <div class="color-info">
            <div class="color-name">
              <span class="name" :style="{ color: item.hex }">{{ item.name }}</span>
              <span class="pinyin">{{ item.pinyin.toUpperCase() }}</span>
            </div>
            <div class="color-value">
              <span class="hex">{{ item.hex }}</span>
              <ElDivider direction="vertical" />
              <span class="rgb">{{ `rgb(${item.RGB[0]}, ${item.RGB[1]}, ${item.RGB[2]})` }}</span>
            </div>
          </div>
        </div>
      </ElCol>
    </ElRow>
  </div>
</template>

<style scoped lang="scss">
.color-list {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  height: 100%;
  padding-right: 25px;
  overflow: auto;
  flex-direction: column;

  .el-col {
    padding-top: 7.5px;
    padding-bottom: 7.5px;
  }
}

.color-card {
  display: flex;
  padding: 16px;
  cursor: pointer;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: all .3s;

  &:hover{
    box-shadow: none;
  }

  .color-bg {
    width: 12px;
    margin-right: 15px;
    border-radius: 4px;
  }

  .color-name {
    .name {
      margin-right: 10px;
    }

    .pinyin {
      font-size: 8px;
    }
  }
}
</style>
